<template>
  <div id="app">
   <router-view></router-view>
   <router-view name="Footer"></router-view>
  </div>
</template>

<script>

</script>

<style>
*{
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}
html,body,#app{
  height: 100%;
}
html{
font-size: 26.67vw;
/* 
  1vw=375px*1/100  视口宽度（375px）的百分之一
  1vw=3.75px
  1px=1/3.75vw=0.2667vw
  1rem=100px
  1rem =根元素的字体大小  100px
  44px
*/
}
body{
  font-size: 16px;
}
#app{
display: flex;
flex-direction: column;
}
#app .box{
  flex:1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;

}
#app .box .header{
  height: .44rem;
   background-color: coral;
}
#app .box .main{
  flex:1;
  overflow-y: auto;
  background:azure;
}
#app .footer{
  height: .44rem;
  background: lightblue;
}
#app .footer ul{
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
/* 交叉选择器 */
#app .footer ul .router-link-exact-active{
  color: orange;
}
#app .footer ul li{
  display: flex;
  flex-direction: column;
  align-items: center;
}
#app .footer ul li span{
  font-size: .2rem;
}
</style>